<template>
  <div class="container">
    <van-loading v-if="loadingPage" class="loading" type="spinner" color="#1989fa" size="50" />

    <template v-else>
      <van-nav-bar title="全部巡演" left-arrow @click-left="onClickLeft"> </van-nav-bar>
      <div class="tour-container">
        <van-list
          v-model:loading="loading"
          v-model:finished="finished"
          :offset="100"
          @load="onLoad"
          :immediate-check="false"
        >
          <ul class="tour-list">
            <li
              class="tour-item"
              v-for="tour in tourList"
              :key="tour.tagId"
              @click="goToTourDetail(tour.tagId)"
            >
              <div class="cover">
                <img :src="tour.picture" class="thumb" v-lazy="img" />

                <div class="label"></div>
              </div>
              <p class="title">{{ tour.tagName }}</p>
            </li>
          </ul>
        </van-list>
      </div>
    </template>
  </div>
</template>

<script setup>
import { ref, onMounted, computed, watch } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()

import { fetchTourList } from '@/api/index.js'
import { useStore } from '@/stores/index.js'
const store = useStore()

const loadingPage = ref(true)

const loading = ref(false)
const finished = ref(false)

const tourList = ref([])
const length = ref(15)
const pageNum = ref(1)
const offset = computed(() => {
  return (pageNum.value - 1) * length.value
})

onMounted(() => {
  // 初始化获取数据
  loadingPage.value = true
  pageNum.value = 1
  getTourList(store.currentCity.cityId, length.value, offset.value)
  loadingPage.value = false
})

const onLoad = async () => {
  // 首先判断是否还有后续数据
  if (tourList.value.length < length.value) {
    loading.value = false
    finished.value = true
    return
  }

  //正常翻页查询
  pageNum.value++
  getTourList(store.currentCity.cityId, length.value, offset.value)
}

const onClickLeft = () => {
  router.back(-1)
}

// 进入巡演简介页面
const goToTourDetail = (id) => {
  router.push({ path: '/show-tour-detail', query: { tourId: id } })
}

const getTourList = async (cityId, length, offset) => {
  loading.value = true

  try {
    const { statusCode, data } = await fetchTourList(cityId, length, offset)
    if (statusCode === 200) {
      if (pageNum.value === 1) {
        tourList.value = data
      } else {
        tourList.value = tourList.value.concat(data)
      }
    }
  } catch (error) {
    console.log('获取巡演列表失败:', error)
  } finally {
    loading.value = false
  }
}
</script>

<style scoped lang="scss">
.container {
  position: relative;

  .loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .tour-container {
    margin: 0 15px;

    .tour-list {
      list-style: none;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 15px 10px;
      padding: 10px 0 0;
      justify-content: center;
      justify-items: center;

      .tour-item {
        width: 100px;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap: 5px;

        .cover {
          width: 100px;
          height: 150px;
          position: relative;

          .thumb {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 10px;
          }
        }

        .title {
          width: 100%;
          font-size: 12px;
          font-weight: 500;
          word-wrap: break-all;
          text-align: left;
          margin: 0;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }
  }
}
</style>
